<template>
  <div class="detail">

    <el-card>
        <el-steps :space="200" :active="handleStepStatus(order.status)" finish-status="success">
          <el-step title="提交订单" :description="order.orderTime"></el-step>
          <el-step title="支付订单" :description="order.paymentTime"></el-step>
          <el-step title="平台发货" :description="order.deliveryTime"></el-step>
          <el-step title="确认发货" :description="order.receiveTime"></el-step>
          <el-step title="订单完成" :description="order.commentTime"></el-step>
        </el-steps>
        <div style="margin-top:30px;">
          <el-alert
            title="当前订单状态"
            :description="order.status | formatStatus"
            type="warning"
            :closable="false"
            show-icon> 
          </el-alert>
        </div>

        <div style="margin-top:30px;">基本信息</div>

        <div class="table-layout" style="margin-top:30px;">
          <el-row :gutter="10">
            <el-col class="table-cell-title" :span="4">订单编号</el-col>
            <el-col class="table-cell-title" :span="4">用户账号</el-col>
            <el-col class="table-cell-title" :span="4">支付方式</el-col>
            <el-col class="table-cell-title" :span="4">订单来源</el-col>
            <el-col class="table-cell-title" :span="4">订单状态</el-col> 
          </el-row>
          <el-row :gutter="10">
            <el-col class="table-cell" :span="4">{{order.orderSn}}</el-col>
            <el-col class="table-cell" :span="4">{{order.memberUsername}}</el-col>
            <el-col class="table-cell" :span="4">{{order.payType | formatPayType}}</el-col>
            <el-col class="table-cell" :span="4">{{order.sourceType | formatSourceType}}</el-col>
            <el-col class="table-cell" :span="4">{{order.status | formatStatus}}</el-col> 
          </el-row>
        </div>

    </el-card>
     
  </div>
</template>

<script>
  import {getOrderDetail} from '@/api/orderApi'
export default {
  name: 'detail',
  data(){
    return {
      id:null,
      order:[]
    }
  },
  created(){
    let id = this.$route.query.id
    getOrderDetail(id).then(res=>{
      console.log(res);
      if(res.status === 1){
        this.order = res.data
      } 
    })
  },
  methods:{
    handleStepStatus(value){
      if(value === 1){
        return 2   // 待发货
      }else if(value === 2){
        return 3   // 已发货
      }else if(value === 3){
        return 4   // 已完成
      }else{
        return 1   // 待付款 已关闭 无效订单
      }

    }
  },
   filters:{
    formatPayType(value){
      if(value === 1){
        return '支付宝'
      }else if(value === 2){
        return '微信'
      }else{
        return '未支付'
      }
    },
    formatSourceType(value){
      switch(value){
        case 0: 
          return 'pc订单';
        case 1: 
          return 'APP订单'; 
        default: 
          return '其它订单'   
      }
    },
    formatStatus(value){
      switch(value){
        case 0: 
          return '待付款';
        case 1: 
          return '待发货'; 
        case 2: 
          return '已发货';  
        case 3: 
          return '已完成'; 
        case 4: 
          return '已关闭';  
        case 5: 
          return '无效订单';  
        default: 
          return ''   
      }
 
    }
  }
}
</script>

<style scoped lang="less">

//  .detail{
//   background-color: skyblue;
//   width: 80%;
//   margin: 0 auto;
//   padding: 20px;
// }

.table-cell-title{
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  padding: 10px;
  background-color: rgba(0,255,0,.1);
  text-align: center;
  font-size: 14px;
}

.table-cell{
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    line-height: 40px;
    padding: 10px; 
    text-align: center;
    font-size: 14px; 
}
</style>